<!--
    功能面板集 FUN
-->
<template>
<div class="fun-panel">
    <div class="fun-panel-tab-box" v-if="allMenu.children.length > 0">
        <a-tabs v-model:activeKey="activeKey" >
            <a-tab-pane  v-for="tab of allMenu.children" :key="tab.menuKey" >
                <template #tab>
                    <rx-icon-show :icon="getTabIcon(tab.iconPc || item.icon)"></rx-icon-show>
                    {{getName(tab.name || tab.title)}}
                </template>
                <ul class="panel-list">
                    <template v-for="item of tab.children">
                        <li class="panel-item" @click="handleOpenMenu(item)">
                            <div class="panel-item-icon-box">
                                <rx-icon-show :icon="getTabIcon(item.iconPc || item.icon)" :size="'20px'"/>
                            </div>
                            <p>
                                <a-tooltip>
                                    <template #title>{{getName(item.name || item.title)}}</template>
                                    {{getName(item.name || item.title)}}
                                </a-tooltip>
                            </p>
                        </li>
                    </template>
                </ul>
            </a-tab-pane>
        </a-tabs>
    </div>
    <div class="on-children-box" v-if="allMenu.noChildren.length >0">
        <div class="panel-row" v-for="item of allMenu.noChildren">
            <div class="panel-item" @click="handleOpenMenu(item)">
                <div class="panel-item-icon-box">
                    <rx-icon-show :icon="getTabIcon(item.iconPc || item.icon)" :size="'20px'"/>
                </div>
                <p>
                    <a-tooltip>
                        <template #title>{{getName(item.name || item.title)}}</template>
                        {{getName(item.name || item.title)}}
                    </a-tooltip>
                </p>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import funPanelCommon from "./funPanelCommon";
import MenuFunc from "../../../layout/js/MenuFunc";
export default {
    name: "FunPanel",
    mixins:[funPanelCommon,MenuFunc],
    computed:{
        allMenu(){
            let obj = {
                noChildren:[],
                children:[]
            }
            for(let item of this.menu){
                obj[(item.children && item.children.length > 0)?'children':'noChildren'].push(item)
            }
            return obj ;
        }
    }
}
</script>

<style scoped>
.fun-panel-tab-box ::v-deep(.ant-tabs)  .ant-tabs-tab {
    padding: 0 6px 10px;
}
.fun-panel-tab-box ::v-deep(.ant-tabs)  .ant-tabs-tab +.ant-tabs-tab{
    margin-left: 20px;
}
.fun-panel{
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
}
.fun-panel-tab-box{
    padding: 10px;
    background-color: #fff;
    border-radius: 6px;
    margin-bottom: 20px;
}

.panel-row,
.panel-list{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(100px,auto));
    gap: 10px;
}
.on-children-box{
    padding: 10px;
    background-color: #fff;
    border-radius: 6px;
}

.panel-item{
    padding: 10px;
    border-radius: 6px;
    background-color: #72b2ff;
    line-height: normal;
    color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.panel-item>p{
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.panel-item-icon-box{
    margin-right: 6px;
}
</style>
